<!DOCTYPE html>
<html>
<head>
<style>
section {
	margin-bottom: 30px
}

section header {
	font-weight: bolder;
	padding-bottom: 10px;
}

.amount {
	width: 200px;
	text-align: right;
	border: 1px solid #aaa;
	background-color: #eee;
	padding: 3px 8px;
}

.msg {
	width: 80%;
	padding: 8px;
	margin-bottom: 20px;
}
</style>
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery-ajax-ext.js"></script>
<script src="/js/gosqlgo.js"></script>
</head>
<body>
	<h1>Transaction Demo</h1>
	<div id="msgid" class="msg"></div>
	<section>
		<header>Account A</header>
		<div id="A" class="amount">
			<script>
				document.write($qry(`select  amount from account where id=? and amount>=?`, 'A',0));
			</script>
		</div>
	</section>
	<section>
		<header>Account B</header>
		<div id="B" class="amount">
			<script>
				document.write($qry(`select amount from account where id=? and amount>=?`, 'B',0));
			</script>
		</div>
	</section>
	<script>
	  function transfer(from, to, money){ 
		 var rst = $java(`TX #TransferMoney 
						int money=Integer.parseInt($3);
						if(money<=0) 
						  throw new SecurityException("Money<=0, IP:"+ getRequest().getRemoteAddr());
						Account a=new Account().setId($1).load();
						if(a.getAmount()<money)
						   return "No enough balance!";
						Account b=new Account().setId($2).load();
						a.setAmount(a.getAmount()-money).update();
						b.setAmount(b.getAmount()+money).update(); 
						return "Transfer Success!|"+a.getAmount()+"|"+b.getAmount();
						`,	from,to,money);   
		  if(rst.startsWith("Transfer Success!")) { 
			  var words=rst.split('|');
	 	      $("#msgid").text(words[0]); 
	 	      $("#"+from).text(words[1]);
	 	      $("#"+to).text(words[2]);
	 	      $("#msgid").css("background", "#dfb");
		  }
		  else { $("#msgid").text(rst);
		         $("#msgid").css("background", "#ffbeb8");
		  } 
		}
	</script>
	<section>
		<header>Transfer</header>
		<form onsubmit="return false" action="##" method="post">
			<input name="amount" value="100" class="amount">
			<button name="btnA2B" value="true" onclick="transfer('A','B',100)">From
				account A to account B</button>
			<button name="btnB2A" value="true" onclick="transfer('B','A',100)">From
				account B to account A</button>
		</form>
	</section>
</body>
</html>